<template>
  <div class="dh-form-demo">
    <!-- 标题 -->
    <Title :title="title" />
    <el-card>
      <el-row style="margin-bottom: 17px">
        <my-form
          :ref-obj.sync="searchForm.ref"
          :form-opts="searchForm"
          :width-size="2"
          @handleEvent="handleSearchEvent"
        >
          <div slot="right" style="margin-left: 20px">
            <el-button type="primary" @click="submitForm">搜索</el-button>
            <el-button type="warning" @click="resetForm">重置</el-button>
          </div>
        </my-form>
      </el-row>
      <el-row>
        <el-button type="primary" @click="handleAddAccount">添加用户</el-button>
        <el-button type="warning" @click="removeAccounts">批量删除</el-button>
        <el-button @click="exportAccount">导出</el-button>
      </el-row>
      <BaseTable
        :has-index="true"
        :has-border="true"
        :table-data="tableData"
        :table-data-total="total"
        :table-column-options="tableColumnOptions"
        @tableUpdate="tableUpdate"
        @selectionChange="selectionChange"
      >
        <!-- 类型插槽 -->
        <template #tag="{ data }">
          <div class="tag">
            <el-tag v-if="data.status == 'normal'" type="success">正常</el-tag>
            <el-tag v-if="data.status == 'hidden'" type="danger">停用</el-tag>
          </div>
        </template>
        <!-- 操作插槽 -->
        <template v-if="role !== '超级管理员'" #operation="{ data }">
          <div
            class="action"
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
            "
          >
            <!-- <el-link :underline="false">详情 </el-link> -->
            <el-link
              :underline="false"
              @click="tableRowEdit(data)"
            >编辑
            </el-link>
            <el-link :underline="false" @click="removeAccount(data.id)">
              删除
            </el-link>
            <!-- <span @click="tableRowEdit(data)">编辑</span> -->
            <!-- <span id="delete" @click="tableRowDelete(data)">shangc</span> -->
          </div>
        </template>
        <!-- 链接插槽 -->
        <!-- <template #link="{ data }">
        <span id="link" @click="check(data)">查看</span>
      </template> -->
      </BaseTable>
    </el-card>
    <AddAccount ref="addAccount" @success="getAccountList" />
  </div>
</template>

<script>
import config from './config'
import BaseTable from '@/components/BaseTable'
import { getAccountList, removeAccount, exportAccount } from '@/api/account'
import AddAccount from './addAccount.vue'
import { downloadFile } from '@/utils/utils'
export default {
  name: 'DhFormDemo',
  components: {
    BaseTable,
    AddAccount
  },
  props: {
    role: {
      type: String,
      default: '超级管理员'
    }
  },
  data () {
    return {
      tableData: [],
      tableColumnOptions: config.tableColumnOptions,
      total: 0,
      searchForm: config.searchForm,
      queryParams: {
        keyword: '',
        starttime: '',
        endtime: '',
        role: '',
        page: 1
      },
      ids: []
    }
  },
  created () {
    // 设置标题
    this.title = this.$route.meta.title
    this.getAccountList()
  },
  // 方法
  methods: {
    // 触发事件
    handleEvent (type, val) {
      console.log(val, type)

      switch (type) {
        case 'checkbox':
          console.log('checkbox', val, type)
          break
      }
    },
    // 页码改变触发
    tableUpdate (e) {
      this.queryParams.page = e.currentPage
      this.getAccountList()
    },
    // 表格数据选中改变触发
    selectionChange (e) {
      console.log(e)
      const ids = []
      e.forEach((item) => {
        ids.push(item.id)
      })
      this.ids = ids
    },
    handleSearchEvent () {},
    // 获取账号列表
    async getAccountList () {
      this.queryParams.role = this.role
      const res = await getAccountList(this.queryParams)
      this.total = res.data.total
      this.tableData = res.data.data
    },
    // 多条删除账号
    async removeAccounts () {
      if (this.ids.length === 0) return this.$message.error('未选中')
      await removeAccount({ ids: this.ids })
      this.$message.success('删除成功')
      this.getAccountList()
    },
    // 单条删除账号
    async removeAccount (id) {
      await removeAccount({ ids: [id] })
      this.$message.success('删除成功')
      this.getAccountList()
    },
    // 提交form表单
    submitForm () {
      this.searchForm.ref.validate((valid) => {
        if (!valid) return
        this.queryParams.starttime = this.searchForm.formData.createDate[0]
          ? this.searchForm.formData.createDate[0].getTime()
          : ''
        this.queryParams.endtime = this.searchForm.formData.createDate[1]
          ? this.searchForm.formData.createDate[1].getTime()
          : ''
        this.queryParams.keyword = this.searchForm.formData.account
        this.getAccountList()
        console.log('最终数据', this.searchForm.formData)
      })
    },
    // 导出账号
    async exportAccount () {
      this.queryParams.starttime = this.searchForm.formData.createDate[0]
        ? this.searchForm.formData.createDate[0].getTime()
        : ''
      this.queryParams.endtime = this.searchForm.formData.createDate[1]
        ? this.searchForm.formData.createDate[1].getTime()
        : ''
      this.queryParams.keyword = this.searchForm.formData.account
      this.queryParams.role = this.role
      const res = await exportAccount(this.queryParams)

      downloadFile(res, '账号列表')
    },
    // // 重置form表单
    resetForm () {
      // Object.assign(
      //   this.searchForm.formData,
      //   this.$options.data().searchForm.formData
      // )
      this.queryParams = {
        keyword: '',
        starttime: '',
        endtime: '',
        role: this.role,
        page: 1
      }
      this.searchForm.ref.resetFields()
      // 清空校验
      this.searchForm.ref.clearValidate()
    },
    // // 清除校验
    // clearValidate () {
    //   this.formOpts.ref.clearValidate()
    // }
    // 添加用户
    handleAddAccount () {
      console.log(this.$refs.addAccount)
      this.$refs.addAccount.open()
    },
    tableRowEdit (data) {
      this.$refs.addAccount.open(data)
    }
  }
}
</script>

<style></style>
